<template>
    <div class="wh-100" style="background-color: white">
        <div style="height: 60px" class="d-flex-align-center bor-base-b pl-24 fw-6 fs-18">外校活动</div>
        <div class="h-80 bor-base-b">
            <div class="h-10 d-flex bor-base-b">
                <div class="w-15 py-12 pl-24 mr-auto">
                    <el-button @click="download">导出数据</el-button>
                    <Button type="dashed" @click="changeTip">{{ openTip ? '关闭提示' : '开启提示' }}</Button>
                </div>
                <div class="w-65 pl-100 d-flex-align-center">
                    <div class="ml-auto">
                        <el-select no-match-text="暂无数据"  no-data-text="暂无数据" v-model="modelState" placeholder="请选择" style="width: 150px">
                            <el-option value="全部" label="全部学校性质"></el-option>
                            <el-option v-for="item in stateSelection" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </div>
                    <div class="ml-28">
                        <el-select no-match-text="暂无数据"  no-data-text="暂无数据" v-model="modelState" placeholder="请选择" style="width: 150px">
                            <el-option value="全部" label="全部学校类型"></el-option>
                            <el-option v-for="item in stateSelection" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </div>
                    <div class="w-30 ml-28 d-flex">
                        <el-input class="w-70" placeholder="输入学校名称" v-model="input3"></el-input>
                        <el-button style="background-color: #1890ff; color: white">搜索</el-button>
                    </div>
                </div>
            </div>
            <div class="h-90">
                <Alert v-show="openTip" show-icon>
                    已选择
                    <span >{{ selectList.length }}</span>
                    项
                    <a @click="toggleSelection">清空</a>
                </Alert>
                <el-table
                    ref="multipleTable"
                    :height="heightNmber"
                    width="100%"
                    class="el-overflow-auto-hidden"
                    v-loading="loading"
                    :header-cell-style="{ background: $backColor }"
                    empty-text="暂无数据"
                    @selection-change="handleSlectionChange"
                    :data="tableData"
                    style="width: 100%">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="name" label="外校活动展示" align="center">
                        <template slot-scope="scoped">
                            <div class="d-flex d-flex-around-center">
                                <div class="bor-base mr-12 d-flex-around-center" id="boxStyle" style="width: 150px; height: 40px; border-radius: 20px">全部({{ scoped.row.total }})</div>
                                <div class="bor-base mr-12 d-flex-around-center" id="boxStyle" style="width: 150px; height: 40px; border-radius: 20px">双选会({{ scoped.row.countDoubleElection }})</div>
                                <div class="bor-base mr-12 d-flex-around-center" id="boxStyle" style="width: 150px; height: 40px; border-radius: 20px">宣讲会({{ scoped.row.countInfoSessions }})</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label"></el-table-column>
                </el-table>
            </div>
        </div>
        <!--分页-->
        <div class="h-10 d-flex-center fs-14">
            <Page show-total show-sizer :total="pageTotal" :current="pageParams.pageNumber" :page-size="pageParams.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" show-elevator />
        </div>
    </div>
</template>
<script>
import { outOfSchoolExportAPI } from '@/api/Main/viewDetailsAboutADoubleMeetingApis';

export default {
    data() {
        return {
            loading: false,
            modelState: '全部',
            pageTotal: 0,
            pageParams: {
                pageNumber: 1,
                pageSize: 10
            },
            stateSelection: [
                {
                    label: '待审核',
                    value: 'toBeReviewed'
                },
                {
                    label: '已通过',
                    value: 'alreadyPassed'
                },
                {
                    label: '已拒绝',
                    value: 'declined'
                }
            ],
            modelPosition: '',
            positionSelection: [],
            tableData: [
                {
                    totalNum: 23567,
                    mutualSelectionNum: 3567,
                    teachInNum: 2000,
                    schoolName: '河南工业大学',
                    natureOfSchool: '公办',
                    schoolType: '综合类'
                },
                {
                    totalNum: 12,
                    mutualSelectionNum: 2,
                    teachInNum: 10,
                    schoolName: '河南大学',
                    natureOfSchool: '公办',
                    schoolType: '综合类'
                }
            ],
            tableColumns: [
                { prop: 'schoolName', label: '学校名称' },
                { prop: 'natureOfSchool', label: '学校性质' },
                { prop: 'schoolType', label: '学校类型' }
            ],
            heightNmber:'95%',
            openTip:true,
            selectList:[],
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        handleSlectionChange(selection) {
            this.selectList=selection
            console.log(selection, '选中行的数据');
        },
        changeTip(){
            this.openTip = !this.openTip
            if(this.openTip){
                this.heightNmber='95%'
            }else{
                this.heightNmber='100%'
            }
        },
        toggleSelection() {
            this.$refs.multipleTable.clearSelection();
        },
        download() {
            outOfSchoolExportAPI().then(res => {
                this.importing1 = false;
                // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
                const blob = new Blob([res], { type: 'charset=utf-8' });
                let url = window.URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', '外校活动信息.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link); // 删除节点
                window.URL.revokeObjectURL(url); //释放该 url
            });
        },

        yesThroughState: function(data) {
            return data.state === '已通过' ? true : false;
        },
        toBeReviewed: function(data) {
            return data.state === '待审核' ? true : false;
        },
        declined: function(data) {
            return data.state === '已拒绝' ? true : false;
        },
        getList() {
            console.log('查询');
        },
        // region TODO 分页
        changePage(val) {
            this.pageParams.pageNumber = val;
            //调接口
            this.getList();
        },
        changePageSize(val) {
            this.pageParams.pageSize = val;
            //调接口
            this.getList();
        }
        // endregion
    }
};
</script>
<style scoped>
#boxStyle:hover {
    color: #ffffff;
    background-color: #909399;
}
</style>